<template>
  <div>
    <the-header-top></the-header-top>
    <logo-bar></logo-bar>
    <div class="personal-order-detail">
      <div class="personal-order-detail-container">
        <ul class="breadcrumb">
          <li><router-link to="/personal">{{$t('message.messageCenter')}}</router-link></li>
          <li><router-link to="/personal/order/0/1">{{$t('message.myOrder')}}</router-link></li>
          <li>{{$t('message.orderDetail')}}</li>
        </ul>

        <div class="personal-order-detail-content">
        	<v-title>{{ $t('message.orderDetail') }}</v-title>
        	<div class="personal-order-detail-status">
        		<personal-order-detail-status :sum-price="orderData.favorable_price" :order-status="status" :order-data-time="getOrderTime" :order-id="orderId" :can-return="orderData.can_return" @update-data="updateData"></personal-order-detail-status>
        	</div>
          <div class="order-detail">
            <div class="order-detail-row-first">
              <div class="order-detail-time">
                <span class="order-detail-label">{{$t('message.orderTime')}}：</span>
                <!--<span class="order-detail-content">{{ orderData.create_time }}</span>-->
                <span class="order-detail-content">{{ orderData.create_time * 1000 | date }}</span>
              </div>
              <div class="order-detail-number">
                <span class="order-detail-label">{{$t('message.orderNum')}}：</span>
                <span class="order-detail-content">{{ orderData.order_number }}</span>
              </div>
            </div>
            <div class="order-detail-row-second">
              <div class="order-detail-name-phone">
                <div class="order-detail-name">
                  <span class="order-detail-label">{{$t('message.consignee')}}：</span>
                  <span class="order-detail-content">{{ orderData.consignee }}</span>
                </div>
                <div class="order-detail-phone">
                  <span class="order-detail-label">{{$t('message.contactInformation')}}：</span>
                  <span class="order-detail-content">{{ orderData.mobile}}</span>
                </div>
              </div>
              <div class="order-detail-address">
                <span class="order-detail-label">{{$t('message.address')}}：</span>
                <span class="order-detail-content">{{ orderData.province }} {{ orderData.city }} {{ orderData.district }} {{ orderData.address_detail }}</span>
              </div>
            </div>
          </div>
          <div class="order-product">
            <v-order-item :order="orderData"></v-order-item>
          </div>
          <div class="order-total">
          	<div class="order-total-container">
          		<v-pay :pay="orderData.down_payment" :markdowns="orderData.code_price" v-if="orderData.base_price"></v-pay>
          	</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VTitle from '@/components/base/VTitle'
import PersonalOrderDetailStatus from '@/components/personal/order/PersonalOrderDetailStatus'
import VOrderItem from '@/components/base/VOrderItemPersonal'
import VPay from '@/components/base/VPayPersonal'
//  订单详情页面
export default {
  name: 'PersonalOrderDetail',
  components: {
    TheHeaderTop,
    LogoBar,
    VTitle,
    PersonalOrderDetailStatus,
    VOrderItem,
    VPay
  },
  data () {
    return {
      orderId: this.$route.query.orderId,
      orderData: {},
      orderStatus: 1,
      totalTime: null,
      reason: '',
      progressActives: [0, 1, 1, 0, 0, 0, 2, 3, 4, 4, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
      status: {}
    }
  },
  computed: {
    getOrderTime () {
      return {
        createTime: this.orderData.create_time,
        payTime: this.orderData.first_pay_time,
        sartTime: this.orderData.receiver_start_time,
        endTime: this.orderData.receiver_end_time
      }
    }
  },
  created () {
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    this.orderId = this.$route.query.orderId
    this.initData()
  },
  methods: {
    setTimer () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        if (this.totalTime >= 1000) {
          this.totalTime -= 1000
        } else {
          clearInterval(this.timer)
        }
      }, 1000)
    },
    // 初始化数据
    initData () {
      this.$ajax.orderDetails({
        id: this.orderId
      }).then((res) => {
        if (res.code === 200) {
          this.orderData = res.data
          if (this.orderData.code_price !== 0) {
            if (parseInt(this.orderData.code_price) > this.orderData.down_payment) {
              this.orderData.down_payments = 1
            } else {
              this.orderData.down_payments = parseInt(this.orderData.down_payment) - parseInt(this.orderData.code_price)
            }
          } else {
            this.orderData.down_payments = this.orderData.down_payment
          }
          this.orderStatus = res.data.order_status
          this.status = {
            status: res.data.order_status,
            active: this.progressActives[res.data.order_status],
            time: parseInt(res.data.check_passed_time) + 86400000 - new Date().getTime(),
            reason: res.data.cancel_reason || this.$t('message.pleaseContactCustomerService'),
            type: 'transaction'
          }
        } else if (res.code === 202) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.requestDataFailed')
          })
          console.log('请求数据失败数据为空')
        } else if (res.code === 301) {
          this.router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      })
    },
    // 刷新数据
    updateData () {
      this.initData()
    }
  }
}
</script>

<style scoped>
.personal-order-detail {
	min-width: 1200px;
  background-color: #f5f5f5;
  padding-bottom: 40px;
}

.personal-order-detail-container {
  width: 1200px;
  margin: 0 auto;
}

.personal-order-detail-container .breadcrumb {
  padding-top: 20px;
  overflow: hidden;
}

.personal-order-detail-container .breadcrumb li {
  float: left;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #333;
}

.personal-order-detail-container .breadcrumb a {
  color: #333;
}

.personal-order-detail-container .breadcrumb a:after {
  content: "\003e";
  display: inline-block;
  height: 20px;
  padding: 0 4px;
}

.personal-order-detail-content {
  padding: 40px;
  margin-top: 20px;
  background-color: #fff;
}

.personal-order-detail-status {
	margin-top: 60px;
}

.personal-order-detail-content .order-detail {
  padding: 0 25px;
  font-size: 14px;
  margin-top: 28px;
}

.personal-order-detail-content .order-detail-label {
  color: #a5a5a5;
}

.personal-order-detail-content .order-detail-content {
  color: #333;
}

.order-detail .order-detail-row-first {
  padding: 32px 0;
  border-bottom: 1px solid #e6e6e6;
  overflow: hidden;
}

.order-detail .order-detail-row-first .order-detail-time {
  float: left;
  width: 282px;
  height: 20px;
  line-height: 20px;
}

.order-detail .order-detail-row-first .order-detail-number {
  float: left;
  height: 20px;
  line-height: 20px;
}

.order-detail .order-detail-row-second {
  padding: 32px 0;
}

.order-detail .order-detail-row-second .order-detail-name-phone {
  overflow: hidden;
}

.order-detail .order-detail-row-second .order-detail-name-phone .order-detail-name {
  float: left;
  width: 282px;
  height: 20px;
  line-height: 20px;
}

.order-detail .order-detail-row-second .order-detail-name-phone .order-detail-phone {
  float: left;
  height: 20px;
  line-height: 20px;
}

.order-detail .order-detail-row-second .order-detail-address {
  height: 20px;
  line-height: 20px;
  margin-top: 32px;
}

.personal-order-detail-content .order-product {
  margin-top: 27px;
}

.order-total {
  margin-top: 40px;
  overflow: hidden;
}

.order-total .order-total-container {
	float: right;
}
</style>
